/*
 * @Description: 同站线路页面
 * @Author: jun.fu
 * @Date: 2019-03-07 17:38:13
 * @Last Modified by:   jun.fu
 * @Last Modified time: 2019-03-07 17:38:13
 */
import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  RefreshControl,
  TouchableOpacity
} from 'react-native'

import Swiper from 'react-native-swiper'
import { getLineList } from '../components/SiteDetails/api/api'
import { px2dp, showToast } from 'rn-xiaobu-utils'
import BusItem from '../components/SiteDetails/components/BusItem'
import flexStyle from '../configs/flex'
import Icon from '../components/public/icon'
import fontsize from '../configs/fontsize'
import skin from '../configs/skin'
import {
  defaultStackOptions,
  getTitleBarOptions
} from '../utils/DefaultTitleOption'
import { routePlanPositionCache } from '../components/public/confs/StorageKeys';

export default class SiteDetails extends Component {
  state = {
    list: [],
    refreshing: false
  }

  static navigationOptions = ({ navigation }) => {
    let option = defaultStackOptions({ navigation })
    option = getTitleBarOptions({ navigation }, option)
    return option
  }

  constructor (props) {
    super(props)
    this.pageNum = 1
    this.pageSize = 5
    // 进入页面获取一次数据
    this.getListData()
  }

  /**
   * 获取列表数据
   * @returns {Promise<*>|Promise<{length, list} | undefined | never>}
   */
  getListData = () => {
    return getLineList(this.props.navigation.getParam('id'), 1, 5).then(res => {
      console.log(res)
      this.setState({
        list: res.list
      })
    })
  }

  /**
   * 渲染线路列表
   * @param {{id, name, start, end, nowStopNum, storeline:{SUB_ROUTEID,BUS_NAME,BUS_START_STATION,BUS_END_STATION,STARTTIME,ENDTIME,PRICE_NOTE,TYPE}, collected}} item
   * @returns {*}
   * @private
   */
  _renderItem = ({ item }) => {
    return (
      // 渲染swiper滑动组件
      <Swiper style={styles.wrapper} showsPagination={false}>
        {item.map(element => (
          <BusItem
            {...element}
            key={element.id}
            thisID={this.props.navigation.getParam('id')}
            isCollected={false}
          />
        ))}
      </Swiper>
    )
  }

  /**
   * 下拉刷新
   * @private
   */
  _onRefresh = () => {
    this.setState(
      {
        refreshing: true
      },
      () => {
        this.getListData()
          .then(() => {
            this.setState({
              refreshing: false
            })
          })
          .catch(() => {
            this.setState({
              refreshing: false
            })
          })
      }
    )
  }

  /**
   * 列表标题渲染
   * @returns {*}
   * @private
   */
  _ListHeaderComponent = () => {
    return (
      <TouchableOpacity
        style={[
          styles.endStationButton,
          flexStyle.flexH,
          flexStyle.flexVc,
          flexStyle.flexHc
        ]}
        onPress={this.toGetEndStation}
      >
        <Icon name={'place'} size={32}/>
        <Text
          style={[
            fontsize.fontsize28,
            skin.baseColorNoAcitve,
            { marginLeft: px2dp(30) }
          ]}
        >
          请输入目的站
        </Text>
      </TouchableOpacity>
    )
  }

  /**
   * 跳转到站点查询页面获取目的站
   */
  toGetEndStation = () => {
    this.props.navigation.push('SearchDetails', {
      type: 3,
      shouldBack: true,
      getInfo: this.endStation,
      cacheKey: routePlanPositionCache
    })
  }

  /**
   * 获取目的站回调方法
   * @param {{id,name,lat,lng,type}} info 目的站信息
   */
  endStation = info => {
    console.log(info)
    if (info.id === this.props.navigation.getParam('id')) {
      console.log('起终点站不能相同')
      showToast('起终点站不能相同')
    } else {
      setTimeout(() => {
        this.props.navigation.navigate('RoutePlan', {
          start: {
            id: this.props.navigation.getParam('id'),
            name: this.props.navigation.getParam('name'),
            type: this.props.navigation.getParam('type'),
            lat: this.props.navigation.getParam('lat'),
            lng: this.props.navigation.getParam('lng')
          },
          end: {
            id: info.id,
            name: info.name,
            type: info.type,
            lat: info.lat,
            lng: info.lng
          }
        })
      }, 0)
    }
  }

  render () {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ flex: 1 }}
          data={this.state.list}
          extraData={this.state}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => {
            return index + ''
          }}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this._onRefresh}
            />
          }
          ListHeaderComponent={this._ListHeaderComponent}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F5F6'
  },
  wrapper: {
    minHeight: px2dp(130)
  },
  endStationButton: {
    backgroundColor: '#ffffff',
    height: px2dp(120),
    marginBottom: px2dp(16)
  }
})
